<template>
    <h2 style="text-align: center;">修改页面</h2>
    <table class="table" style="width: 600px;margin: 10px auto;">
<tbody>
    <tr>
        <td style="width: 100px;">用户编号</td>
        <td>
            <input type="text" v-model="form.empcode" class="form-control">
        </td>
    </tr>
    <tr>
        <td>用户名称</td>
        <td>
            <input type="text" v-model="form.empName" class="form-control">
        </td>
    </tr>
    <tr>
        <td>用户性别</td>
        <td>
            <label class="radio-inline">
<input type="radio" v-model="form.gender" :value="true">女
            </label>
            <label class="radio-inline">
<input type="radio" v-model="form.gender" :value="false">男
            </label>
        </td>
    </tr>
        <tr>
        <td>出生日期</td>
        <td>
            <input type="date" v-model="form.regtime" class="form-control">
        </td>
    </tr>
    <tr>
        <td>电话号码</td>
        <td>
            <input type="text" v-model="form.phone" class="form-control" maxlength="11">
        </td>
    </tr>
    <tr>
        <td>身份证</td>
        <td>
            <input type="text" v-model="form.idcard" class="form-control" maxlength="18">
        </td>
    </tr>
    <tr>
        <td>状态</td>
        <td>
            <label class="radio-inline">
<input type="radio" v-model="form.state" :value="true">正常
            </label>
            <label class="radio-inline">
 <input type="radio" v-model="form.state" :value="false">冻结
            </label>
        </td>
    </tr>
    <tr>
        <td>级别</td>
        <td>
            <select v-model="form.ulid" class="form-control">
                <option value="">请选择</option>
                <option v-for="item in userlevellist" :key="item.ulid" :value="item.ulid">{{ item.ulName}}</option>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center;">
            <button class="btn btn-success" @click="empupd">修改</button>
        </td>
    </tr>
</tbody>
    </table>
</template>
<script setup lang ="ts">
// 引入主键
import { ref, reactive, onMounted } from 'vue';
// 数据访问
import axios from 'axios';
// bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
import { useRoute, useRouter } from "vue-router"
import router from '@/router';

const rotuer = useRouter();

const route = useRoute();

const getEmpinfo = () => {
    axios.get("http://localhost:5123/api/UserInfo/GetEmpinfo?id=" + route.query.id).then(res => {
// 反填
        let d = res.data;
        form.empid = d.empid;
        form.empcode = d.empcode;
        form.empName = d.empName;
        form.gender = d.gender;
        form.regtime = d.regtime;
        form.phone = d.phone;
        form.idcard = d.idcard;
        form.state = d.state;
        form.ulid = d.ulid;
        form.mark = d.mark;
        form.money = d.money;
    }).catch(err => {
        console.log(err);
 })
}
// 变量
// 会员信息
const form = reactive({
    empid: 0,
  empcode: "",
  empName: "",
    gender: true,
  regtime: "",
    phone: "",
  idcard: "",
  state: true,
  ulid: "",
  mark: 0,
  money: 0,
  
})
// 用户级别列表
const userlevellist = ref([])
// 方法
// 添加会员
const empupd = () => {
    if (!form.empcode) {
        alert("用户编号不能为空");
        return;
    }
    if (!form.empName) {
        alert("用户名称不能为空");
        return;
    }
    if (form.phone.length != 11) {
        alert("电话号码必须是11位");
        return;
    }
    // 电话号码正则
    if (!/^1[3-9]\d{9}$/g.test(form.phone)) {
        alert("电话号码不正确");
        return;
    }
    if (!form.phone) {
        alert("电话不能为空");
        return;
    }
    if (form.idcard.length != 18) {
        alert("身份证照号码必须是18位");
        return;
    }
    if (!form.idcard) {
        alert("身份证号不能为空");
        return;
    }
    if (!form.ulid) {
        alert("请选择用户级别");
        return;
    }
    //保存(调用API)
    axios.put("http://localhost:5123/api/UserInfo/Empupd",form).then(res => {
        if (res.data == -1) {
            alert("身份证重复！");
            return;
        }
        if (res.data > 0) {
            alert("修改成功！");
            router.push("/emplist");
        }
        else {
            alert("修改失败");
        }
    }).catch (err=> {
        console.log(err);
        })
}
// 获取用户列表
const getUserlevellist = () => {
    axios.get("http://localhost:5123/api/UserInfo/GetUserlevelList").then(res => {
        userlevellist.value = res.data;
    }).catch(err => {
        console.log(err);
    })
};

// 色子函数(jqueary中文档就绪)
onMounted(() => {
    getUserlevellist();
    getEmpinfo();
})
</script>
<style>



</style>